<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>personInfo</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/statics/css/personInfo.css"/>

</head>
<body>
    <div id="app">
        <el-container>
            <el-header style="height:50px;">
                <img src="/statics/images/logo.gif" alt="">
                <div>心语博客</div>
            </el-header>
            <a href="http://localhost:8080/index"><svg t="1730769079151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2134" width="12" height="12"><path d="M282 512c0 19 7.2 38 21.7 52.5l385.7 386.1c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L349 519.3c-4-4-4-10.5 0-14.5l385.7-386.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L303.7 459.5C289.2 474 282 493 282 512z" p-id="2135"></path></svg>返回</a>
            <el-main>
                <el-card style="background: rgba(255, 255, 255, 0.7);height: 500px">
                    <div class="info-item">
                        <div>头像</div>
                        <div>
                            <el-avatar v-if='!isUpdataAvatar' :src="person.avatar" :key="person.userId"></el-avatar>
                            <el-upload v-if="isUpdataAvatar" name="avatar"
                                    class="avatar-uploader" :headers="header"
                                    action="/updateAvatar"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div v-if="currentUserId == person.userId">
                        <!--点击修改变上传-->
                            <span @click="isUpdataAvatar = !isUpdataAvatar">修改</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <div>账号</div>
                        <div>
                            {{person.account}}
                        </div>
                        <div v-if="currentUserId == person.userId"></div>
                    </div>
                    <div class="info-item">
                        <div>昵称</div>
                        <div>
                            <span v-if="!isUpdateNickname">{{person.nickname}}</span>
                            <el-input v-model="person.nickname" v-if="isUpdateNickname"></el-input>
                        </div>
                        <div v-if="currentUserId == person.userId">
                            <span v-if="!isUpdateNickname" @click="isUpdateNickname = !isUpdateNickname">修改</span>
                            <span v-if="isUpdateNickname" @click="updateNickname">确认</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <div>email</div>
                        <div>
                            <span v-if="!isUpdateEmail">{{person.email}}</span>
                            <el-input type='email' v-model="person.email" v-if="isUpdateEmail"></el-input>
                        </div>
                        <div v-if="currentUserId == person.userId">
                            <span v-if="!isUpdateEmail" @click="isUpdateEmail = !isUpdateEmail">修改</span>
                            <span v-if="isUpdateEmail" @click="updateEmail">确认</span>
                        </div>
                    </div>
                </el-card>
            </el-main>
            <el-footer height="169px">
                &copy;copy right
            </el-footer>
        </el-container>
    </div>
</body>
<script src="https://unpkg.com/vue@2.5/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/statics/js/request.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                person:{
                    account:'sdfsf',
                    nickname:'dsfsdf',
                    email:'sdsd@fg.cc',
                    avatar:'#'
                },
                header:{
                    "token":window.sessionStorage.getItem("token")
                },
                isUpdataAvatar:false,
                isUpdateNickname:false,
                isUpdateEmail:false,
                imageUrl:'',
                currentUserId:0
            }
        },
        created(){
            let urlArr = window.location.pathname.split("/");
            let id = urlArr[urlArr.length - 1]
            request.post("/personInfo/"+id,res => {
                this.person = res
                this.person.avatar = "http://localhost:8080" + this.person.avatar
                console.log(this.person.avatar)
            })
            request.post("/personalInfomation",res=>{
                this.currentUserId = res.userId
            })
        },
        methods: {
            handleAvatarSuccess(res, file) {
                console.log(res)
                console.log(file)
                this.imageUrl = URL.createObjectURL(file.raw);
                this.person.avatar = URL.createObjectURL(file.raw);
                this.isUpdataAvatar = !this.isUpdataAvatar
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            updateNickname(){
                if(this.person.nickname.length > 4 && this.person.nickname.length < 12){
                    this.isUpdateNickname = !this.isUpdateNickname
                    this.update({userId:this.person.userId, nickname: this.person.nickname})
                }else{
                    this.$message("昵称长度不和规范")
                }

            },
            updateEmail(){
                if(/^[A-Za-z0-9]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/.test(this.person.email)){
                    this.isUpdateEmail = !this.isUpdateEmail
                    this.update({userId:this.person.userId,email: this.person.email})
                }else{
                    this.$message("邮箱格式不合规范")
                }

            },
            update(person){
                request.post("/updateUser",person,(res)=>{
                    console.log(res)
                })
            }
        }
    })
</script>
</html>